import React, { useState } from "react";
import { Table, Radio, Divider } from "antd";
import { RowSelectionType } from "antd/lib/table/interface";
// import styles from "./main.module.css";
import "./tabel.css"

interface column {
  title: string;
  dataIndex: string;
  render?: Function;
}

interface data {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    render: (text: string) => <a>{text}</a>,
  },
  {
    title: "Age",
    dataIndex: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
  },
];
const data: data[] = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
  },
  {
    key: "4",
    name: "Disabled User",
    age: 99,
    address: "Sidney No. 1 Lake Park",
  },
];

const rowSelection = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  getCheckboxProps: (record: any) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};

interface formProps {
  testProp: string;
}

type selectionType = RowSelectionType | undefined;

interface formStates {
  testState: string;
  selectionType: selectionType;
  columns?: any;
}

export default class FormInfo extends React.Component<formProps, formStates> {
  state = {
    testState: "123",
    selectionType: undefined,
    columns: columns,
  };

  // constructor(){
  // super()
  // super(formProps);
  // }

  setSelectionType(val: RowSelectionType) {
    this.setState({ selectionType: val });
  }

  render() {
    let selectionType = this.state.selectionType as selectionType;

    return (
      <div>
        <Radio.Group
          onChange={({ target: { value } }) => {
            this.setSelectionType(value);
          }}
          value={selectionType}
        >
          <Radio value="checkbox">Checkbox</Radio>
          <Radio value="radio">radio</Radio>
        </Radio.Group>

        <Divider />

        <Table
         //  className={styles.table}
         className="table"
          rowSelection={{
            type: selectionType,
            ...rowSelection,
          }}
          columns={columns}
          dataSource={data}
        />
      </div>
    );
  }
}
